import React from 'react';
import { View, Text, StyleSheet, Image,TouchableOpacity} from 'react-native';
import { deviceWidth } from 'src/util'
import Modal from 'react-native-modal'
import { deviceHeight, titleHeight } from '../../../util';
import { Flex } from '@ant-design/react-native';
import Layer from "src/components/Layer";


export default class TelNumView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: false,
        }
    }

    selectedPayWay = (flag) => {
        this.setState({ payWay: flag });
    }

    showOrDismiss = (flag) => {
        this.setState({ isVisible: flag });
    }

    componentDidMount = () => {
        this.state.isVisible = this.props.isVisible;
    }
    render() {

        const {customer} = this.props
        return (
            <Modal isVisible={this.state.isVisible}
                animationInTiming={600}
                animationOutTiming={100}
                animationIn="zoomInUp"
                animationOut={'zoomOutDown'}
                backdropOpacity={0.2}
                style={{
                    marginLeft: 10,
                    marginRight: 10,
                    justifyContent: 'flex-start',
                    marginTop: 50,
                }}
                onBackdropPress={() => {
                    this.showOrDismiss(false);
                }}>
                <View style={{alignItems: 'center', backgroundColor: '#fff',marginHorizontal:50,height:deviceWidth-100-titleHeight,marginTop:deviceHeight*0.5-(deviceWidth-100)*0.5,borderRadius: 10 }}>
                <Flex
                        style={{ position: 'absolute', left:10, top: 10 }}
                        onPress={() => {
                            this.props.close()
                        }}>
                        <Image
                            style={{ width: 20, height: 20 }}
                            source={require('src/assets/chaClose.png')}
                        >
                        </Image>
                 </Flex>


                 <View style={{marginTop:50,justifyContent:'center',alignItems:'center'}}> 
                     <Text style={{fontSize:17,color:'#2E2E2E'}}>联系客服</Text>
                     <Text style={{fontWeight:'bold',color:'#378EFB',fontSize:13,marginTop:30}}>{customer.phone}</Text>
                 </View>

                 <TouchableOpacity
                     activeOpacity={0.8}
                     onPress={()=>{
                        this.props.callPhone()
                    }}>
                 <View style={{borderRadius:8,paddingHorizontal:20,paddingVertical:5,marginTop:30,flexDirection:'row',backgroundColor:'#378EFB'}}>
                     <Text style={{fontSize:16,color:'#fff'}}>拨打</Text>
                 </View>
                 </TouchableOpacity>
                </View>
            </Modal>

        )
    }
}

const styles = StyleSheet.create({
    image: {
        width: 40,
        height: 40,
        marginLeft: 20
    },
    TextPosition: {
        marginTop: 10,
        marginLeft: 15,
        fontSize: 15
    },
    cellView: {
        height: 80,
        width: deviceWidth,
        paddingLeft: 20,
        paddingRight: 30
    }

})